import { Input, Picker, Space } from 'antd-mobile'
import { DownOutline, UserOutline } from 'antd-mobile-icons'
import { PickerValue } from 'antd-mobile/es/components/picker-view'
import { useState } from 'react'
import './index.scss'
const columns = [['86', '01', '02', '03']]

interface MobileValue {
  preValue: string
  realValue: string
}

interface Props {
  value?: MobileValue
  onChange?: (value: MobileValue) => void
}
/**
 * 手机号输入组件
 * @param
 * @returns
 */
const MobileField: React.FC<Props> = ({
  value = { preValue: '86', realValue: '' },
  onChange
}) => {
  const [visible, setVisible] = useState(false)

  // 调用回调函数
  const triggerValue = (changedValue: Partial<MobileValue>) => {
    onChange?.({ ...value, ...changedValue })
  }

  // 真实手机号改变
  const onRealValueChange = (value: string) => {
    triggerValue({ realValue: value })
  }

  // 手机号前缀改变
  const onPreValueChange = (value: PickerValue[]) => {
    const v = value[0]
    if (v === null) return
    triggerValue({ preValue: String(v) })
  }
  return (
    <div className='mobile-field-contianer'>
       <UserOutline className="left-icon" />
      <Space align="center">
        <Space align="center" onClick={() => setVisible(true)}>
          <div>+{value.preValue}</div>
          <DownOutline />
        </Space>
        <Input
          placeholder="请输入手机号"
          value={value.realValue}
          onChange={onRealValueChange}
        />
      </Space>
      <Picker
        columns={columns}
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
        value={[value.preValue]}
        onConfirm={onPreValueChange}
      />
    </div>
  )
}

export default MobileField
